import React, { Component } from 'react'
import { Select } from 'antd'
import type { ColumnsType } from 'antd/es/table';
import { Table } from 'antd';
import './Leave.css'

// 时间组件导入
import type { DatePickerProps, } from 'antd';
import { DatePicker, Space } from 'antd';
import service from '../../../utils/service';
// 时间定义
const { Option } = Select;
interface DataType {
  department: any;
  name: any;
  start: any;
  end: any;
  types: any;
  time: any;
  sta: any;
  operation: any
  rove: any
  item: any
}

export default class Work extends Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {
      arr2: [],
      xqkq: '',
      ids: ''
    }
  }
  columns: ColumnsType<DataType> = [
    {
      title: '考勤学年',
      dataIndex: 'year',
      width: 120,
      align: 'center',

    },
    {
      title: '考勤学期',
      dataIndex: 'term',
      width: 120,
      align: 'center',
    },
    {
      title: '学期开始时间',
      dataIndex: 'agin',
      width: 180,
      align: 'center',
    },
    {
      title: '学期结束时间',
      dataIndex: 'over',
      width: 180,
      align: 'center',
    },
    {
      title: '考勤开始时间',
      dataIndex: 'starttim',
      width: 120,
      align: 'center',
    },
    {
      title: '考勤结束时间',
      dataIndex: 'overtim',
      width: 180,
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 180,
      align: 'center',
      render: (text, record, index) => (
        <div>
          <button className='ljsp' onClick={() => this.vie(text, record, index)}>查看</button>
          <button className='ljsp' onClick={() => this.edi(text, record, index)} style={{ marginLeft: '20px' }}>编辑</button>
        </div>
      )
    },
  ];
  // 发请求获取tab表格数据
  componentDidMount(): void {
    service({
      url: '/attendance'
    }).then(res => {
      this.setState({
        arr2: res.data,
      })
    })

  }
  // 重置
  rese = () => {
    service({
      url: '/attendance'
    }).then(res => {
      this.setState({
        arr2: res.data,
      })
    })

  }
  // 查询 
  ser = () => {
    service({
      url: '/attendance',
      params: {
        year: `${this.state.xqkq}年`
      }
    }).then(res => {
      this.setState({
        arr2: res.data
      })
    })
  }
  // 跳转到查看
  vie = (text: any, record: any, index: any) => {
    this.props.history.push({ pathname: '/Main/Vie', query: { record } })
  }
  // 跳转到编辑
  edi = (text: any, record: any, index: any) => {
    this.props.history.push({ pathname: '/Main/Edi', query: { record } })
  }
  // 跳转到添加规则
  gz = () => {
    this.props.history.push('/Main/Rule')
  }
  render() {
    return (
      <div>
        <div className='box1'>
          {/* <Select allowClear style={{ width: '142px', marginLeft: '20px', marginTop: '20px' }} placeholder="学期考勤" onSelect={(value) => { this.setState({ xqkq: value }) }}> */}
          {/* 警告value和label内容不同 */}
          {/* {this.state.arr2.map((item: any) => <><Option value={item.id}>{item.year}{item.term}</Option></>)} */}
          {/* </Select> */}
          <Space direction="vertical">
            <DatePicker onChange={(date, dateString) => { this.setState({ xqkq: dateString }) }} picker="year" allowClear style={{ width: '142px', marginLeft: '20px', marginTop: '20px' }} placeholder="请选择年份"/>
          </Space>
          <button className='cx' onClick={this.ser}>查 询</button>
          <button className='cz' onClick={this.rese}>重 置</button>
          <button onClick={this.gz} className='tjgz'>添加规则</button>
          <div className='sj' >
            <p className='sjwz'>查询结果：共计<span style={{ color: '#1890FF' }}> {this.state.arr2.length} </span>条数据</p>
          </div>
          <div style={{ marginTop: '20px' }}>
            <Table columns={this.columns} dataSource={this.state.arr2} pagination={{ pageSize: 10 }} scroll={{ y: 460 }} bordered={true} />
          </div>
        </div>

      </div>
    )
  }
}
